<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$card['name']}</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!--<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css">-->
     <link rel="stylesheet" type="text/css" href="/Public/projects/card/libs/animate.css">
    <link rel="stylesheet" type="text/css" href="/Public/projects/card/style/base.css">
    <link rel="stylesheet" type="text/css" href="/Public/projects/card/style/index.css?v=2">
    <!-- <link rel="stylesheet/less" type="text/css" href="/Public/projects/card/style/index.less"> -->
</head>
<body>
<div class="container index">
    <div class="bg">
        <audio id="bgm" src="/Public/projects/card/assets/bgm/bgm_whlt.mp3?v=1" loop="loop">
            您的浏览器不支持 audio 标签。
        </audio>
        <div class="bgm ico button animated" id="bgm_ico"></div>
        <img src="/Public/projects/card/assets/images/bg_whlt.jpg?v=1">
        <div class="button make" id="make"></div>
        <div class="button intro" id="intro"></div>
    </div>
</div>
<div class="bg_introwhlt" id="intro_div">
    <img class="make_intro" onclick="intro_to_make();"
         src="/Public/projects/card/assets/images/btn_make_whlt.png" style="height: 120px;height: 120px;margin-top: 125%;">
</div>
<div class="bg_makewhlt" id="make_div">
    <div style="position:relative;width:100%;height:0;padding-top:100%">
        <div  id="img_div">
            <img src="/Public/projects/card/assets/images/btn_upload_whlt.png" style="position:absolute;top:25%;left:20%;width:60%;height:60%" id="img">
        </div>

    </div>

    <input type="file" id="uploaderInput" style="display: none">
    <div style="font-size: larger;font-weight:bolder;color: white;position: absolute;top: 65%;text-align: center;width: 80%;left: 10%">
        我在<input type="text" id="address" maxlength="7" style="width: 45%;border: none;border-bottom:solid white 1px;background-color: inherit;font-size: larger;font-weight:bolder;color: yellow;text-align: center;" >村文化礼堂
        <p style="margin-top: 10px;">热烈庆祝首个“中国农民丰收节”</p>
    </div>
    <img class="btn-whltsubmit" src="/Public/projects/card/assets/images/btn_submit_whlt.png"
         style="position:absolute;width: 100px;height: 40px;left:10%;top:80%" onclick="add_data()" id="btn-whltsubmit">
    <img class="btn-whltshare" src="/Public/projects/card/assets/images/btn_share_whlt.png"
         style="position:absolute;width: 150px;height: 40px;left:50%;top:80%" onclick="share()" id="btn-whltshare">
    <img src="/Public/projects/card/assets/images/share_wxcode.png" style="position:absolute;width: 20%;left:40%;top:80%;display: none" id="share_wxcode">

</div>
<div style="background-color: rgba(0,0,0,0.8);z-index: 13;width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: none" id="mask"></div>
<p style="font-size: larger;font-weight:bolder;color: white;position:absolute;width: 30%;left:40%;top:5%;display: none;z-index: 16" id="share_tip">长按保存图片</p>
<img style="z-index: 14;display: none;position: absolute;top:0;left:15%;width: 80%" src="/Public/projects/card/assets/images/share_whlt.png" id="share_img">
<!-- ========================================================================= -->
<script src="/Public/projects/card/libs/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/Public/js/html2canvas.min.js"></script>
<script type="text/javascript" src="/Public/js/canvas2image.js"></script>
<script src="/Public/projects/card/js/common.js"></script>
<script>
    var id={$card['card_id']};
    var pic = '';
    $(function () {
        $("#make").click(function () {
            $("#make_div").css("display", "block");
        });
        $("#intro").click(function(){
            $("#intro_div").css("display", "block");
        });
        function toggleBgm ($bgm ,boo){
            if(boo){
                $bgm.addClass("on");
//                $bgm.addClass("anim-rotate");
                $("#bgm")[0].play();
                bgm = 1;
            }else{
                $bgm.removeClass("on");
//                $bgm.removeClass("anim-rotate");
                $("#bgm")[0].pause();
                bgm = 0;
            }
        }
        var bgm = ns.getLocationParams()["bgm"] || 1 ;
        bgm = Number(bgm);
        if(bgm>0){
            setTimeout(function(){
                toggleBgm($(".button.bgm"), true);
            },500);
            if(wx){
                document.addEventListener("WeixinJSBridgeReady", function () {
                    setTimeout(function(){
                        toggleBgm($(".button.bgm"),true);
                    },500);
                }, false);
            }
        }

        $(".button.bgm").tap(function () {
            toggleBgm($(this) , ! $(this).hasClass("on"));
        });
    });
    function add_data(){
        if(pic == ''){
            alert("请上传图片");return;
        }
        if($("#address").val() == ''){
            alert("请输入地址");return;
        }
        $.ajax({
            url:"/Wap/Card/register",
            dataType:"json",
            data:{
                id:id,
                pic:pic,
                content:$("#address").val()
            },
            type:'post',
            async: false,
            success:function(res){
                if(res.status == 1){
                    convert2canvas();
                }
            }
        })
    }
    function convert2canvas() {
        $(".bgm").css("display", "none");
        $("#btn-whltshare").css("display", "none");
        $("#btn-whltsubmit").css("display", "none");
        $("#share_wxcode").css("display", "block");
        $(".addclass").remove();
        var shareContent = $("body")[0];
        var width = shareContent.offsetWidth;
        var height = shareContent.offsetHeight;
        var canvas = document.createElement("canvas");

        canvas.width = width;
        canvas.height = height;

        var opts = {
            canvas: canvas,
            logging: true,
            width: width,
            height: height
        };
        html2canvas(shareContent, opts).then(function (canvas) {
            var context = canvas.getContext('2d');
            var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
            $("#mask").css("display", "block");
            document.body.appendChild(img);
            $(img).css({
                "width": canvas.width * 0.4 + "px",
                "height": canvas.height * 0.4 + "px",
                "position": "fixed",
                "top": canvas.height * 0.05 + "px",
                "left": canvas.width * 0.05 + "px",
                "z-index": 15
            });
            $("#share_tip").css("display", "block");
            $(img).addClass("addclass");
        });
    }
    function display_canvas(){
        $(".addclass").remove();
        $("#mask").css("display", "none");
        $(".bgm").css("display", "block");
        $("#btn-whltshare").css("display", "block");
        $("#btn-whltsubmit").css("display", "block");
        $("#share_wxcode").css("display", "none");
        $("#share_tip").css("display", "none");
    }
    $(".addclass").click(function(){
        display_canvas();
    });
    $("#mask").click(function(){
        $("#share_img").css("display", "none");
        display_canvas();
    });

    function intro_to_make(){
        $("#intro_div").css("display", "none");
        $("#make_div").css("display", "block");
    }
</script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    document.body.addEventListener('touchmove' , function(e){
        e.preventDefault();
    }, { passive:false });
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{$wxuser["appid"]}', // 必填，公众号的唯一标识
        timestamp: "{$timestamp}", // 必填，生成签名的时间戳
        nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
        signature: '{$wxSha1}',// 必填，签名，见附录1
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline', 'chooseImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.error(function(res){
        //console.log(res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
    wx.ready( function( e ){
        wx.onMenuShareAppMessage({
            title: "{$card['share_title']}", // 分享标题
            desc: "{$card['share_desc']}", // 分享描述
            link: location.protocol + "//" + window.location.hostname + "/Wap/Card/index?id={$card['card_id']}", // 分享链接
            imgUrl: location.protocol + "//" + window.location.hostname + "{$card['share_pic']}", // 分享图标

            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        wx.onMenuShareTimeline({
            title: "{$card['share_title']}", // 分享标题
            desc: "{$card['share_desc']}",
            link: location.protocol + "//" + window.location.hostname + "/Wap/Card/index?id={$card['card_id']}", // 分享链接
            imgUrl: location.protocol + "//" + window.location.hostname + "{$card['share_pic']}", // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    })

    $("#img_div").click(function () {
        if(window.__wxjs_is_wkwebview){
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original','compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    for(var i=0; i<localIds.length;i++){
                        wx.getLocalImgData({
                            localId: localIds[i],
                            success:function(res){
                                var localData = res.localData;
                                $("#img").attr("src", localData);
                                pic = localData;
                            },
                            fail: function(res){
                                alert(res);
                            }
                        });
                    }
                }
            })
        }else{
            $("#uploaderInput").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#uploaderInput").on("change",function(){
                var file = this.files[0];
                if(!/image\/\w+/.test(file.type)){
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader=new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function() {
                    $("#img").attr("src", this.result);
                    pic = this.result;
                };
            });
        }
    });
    function share(){
        $("#mask").css("display", "block");
        $("#share_img").css("display", "block");
    }
    $("#share_img").click(function(){
        $("#mask").css("display", "none");
        $("#share_img").css("display", "none");
    })
    window.alert = function(name){
        var iframe = document.createElement("IFRAME");
        iframe.style.display="none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    }
</script>
<script src="/Public/js/common/baidutongji.js"></script>
</body>
</html>